<template>
  <div>
    <van-nav-bar fixed="true" placeholder="true" title="发布闲置" />
    <van-form @submit.once="check">
      <van-field
        v-model="title"
        type="textarea"
        label="商品"
        placeholder="请输入你想出租的商品名"
      />
      <van-field
        v-model="description"
        rows="4"
        autosize
        label="商品信息"
        type="textarea"
        maxlength="999"
        placeholder="请输入商品型号、成色...."
        show-word-limit
      />
      <van-field
        left-icon="balance-o"
        v-model="price"
        type="number"
        label="价格"
        placeholder="请输入你想出租的每日单价"
      />
      <van-field
        left-icon="refund-o"
        v-model="deposit"
        type="number"
        label="请输入押金"
        placeholder="请输入租赁该物品需要的押金"
      />
      <van-field name="uploader" label="上传商品图片">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button :loading="showLoading" round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "商品发布",
  data() {
    return {
      showLoading: false,
      title: "",
      description: "",
      price: "",
      deposit: "",
      uploader: [],
    };
  },

  methods: {
    check() {
      this.axios({
        method: "GET",
        url: "/aapi/me",
      })
        .then((response) => {
          this.onSubmit();
        })
        .catch((error) => {
          if (error.response.status == 401) Toast.fail("请先登录");
          this.$router.push("/login");
        });
    },
    onSubmit() {
      if (
        this.uploader == undefined ||
        this.uploader.length <= 0 ||
        this.title == "" ||
        this.description == "" ||
        this.price == "" ||
        this.deposit == ""
      ) {
        Toast.fail("请完善所有信息且至少上传一张图片");
      } else {
        let firstFormData = new FormData();
        firstFormData.append("title", this.title);
        firstFormData.append("description", this.description),
          firstFormData.append("price", this.price),
          firstFormData.append("deposit", this.deposit);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        //第一次发送POST请求存储商品信息并且获得商品在数据库中的id和 用户的姓名,并返回，res是一个map
        this.axios.post("/aapi/shangpinfabu", firstFormData, config).then((res) => {
          let productId = res.data.id;
          this.showLoading = true;
          let formData = new FormData();
          this.uploader.forEach((item) => formData.append("file", item.file));
          formData.append("id", res.data.id);
          formData.append("username", res.data.name);
          this.axios
            .post("/aapi/upload", formData, config)
            .then((res) => {
              console.log(productId);
              let formData2 = new FormData();
              formData2.append("productId", productId);
              this.axios
                .post("/aapi/uptoes", formData2)
                .then((response) => {
                  console.log(response);
                  Toast.success(response.data);
                  Toast.fail("您的闲置物品已经发布");
                  this.$router.push("/");
                })
                .catch((error) => {
                  Toast.fail("uptoes服务器报错了");
                  console.log(error);
                });
            })
            .catch((error) => {
              Toast.fail("upload服务器报错了");
              console.log(error);
            });
        });
      }
    },
  },
};
</script>
